<template>
  <span class="rating-stars">
    <i v-for="(item, index) in getStars"
      :key="index" :class="item"
      :style="starsStyle"
    >
    </i>
  </span>
</template>

<script type="javascript/ecmascript6">
const CLS_ON = 'iconfont icon-xingxing'
const CLS_HALF = 'iconfont icon-banxing01'
const CLS_OFF = 'iconfont icon-star'

export default {
  name: 'stats',
  props: {
    space: { // 星星间距
      default: 0,
      type: Number
    },
    size: { // 星星大小
      default: 0.3,
      type: Number
    },
    score: { // 评价分数
      default: 0,
      type: Number
    },
    count: { // 星星数量 默认五星
      default: 5
    }
  },
  data () {
    return {
      starsStyle: {
        marginLeft: this.space + 'rem',
        marginRight: this.space + 'rem',
        fontSize: this.size + 'rem'
      }
    }
  },
  computed: {
    getStars () {
      let stars = []
      let score = Math.floor(this.score * 2) / 2
      let hasDecimal = score % 1 !== 0
      let integer = Math.floor(score)
      for (let i = 0; i < integer; i++) {
        stars.push(CLS_ON)
      }
      if (hasDecimal) {
        stars.push(CLS_HALF)
      }
      while (stars.length < this.count) {
        stars.push(CLS_OFF)
      }
      return stars
    }
  }
}
</script>

<style lang="stylus" scoped>
.rating-stars
  display: flex;
  align-items: center;
  flex-direction: row;
  i
    letter-spacing: -0.03rem;
</style>
